<template>
<div>
  <div  class="musicIcon" >
    <a id="mc_play" class="on" @click="playOrClose">
      <audio id="musicfx" loop="loop"  autoplay="autoplay">
        <source src="../assets/css/music.mp3" type="audio/mpeg">
      </audio>
    </a>
    <img src="../assets/img/musicIcon.svg" :style="{ animation: play ? 'rotating 1.2s linear infinite' : ''}"/>
  </div>
  <swiper v-if="!showConfession" :options="swiperOption">
    <swiper-slide>
      <div class="slide-one ani" swiper-animate-effect="rotateIn" >
         <audio ref="audio" loop="" autoplay  src="../assets/diao.mp3"   preload=""></audio>
        <div class="title ani" swiper-animate-effect="rotateInDownLeft" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">不一样的</div>
        <div class="num  ani" swiper-animate-effect="rotateInDownRight" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">
          <img class="title-img ani" swiper-animate-effect="fadeInRight"   src="../assets/img/520.png"/>
        </div>
        <div class="icon  ani" swiper-animate-effect="rotateIn" swiper-animate-duration="0.5s" swiper-animate-delay="0.8s">
          <img src="../assets/img/close.png"/>
        </div>
        <div class="logo  ani" swiper-animate-effect="bounceIn" swiper-animate-duration="1s" swiper-animate-delay="1s">
          <img src="../assets/img/logo.png"/>
        </div>
      </div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-two ani" swiper-animate-effect="rotateIn" >
        <div class="title-span ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1s" >
          <img class="second-title" src="../assets/img/2018.png"/>
        </div>
        <div class="num ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="1.5s">对你来说是什么</div>
        <div class="summary  ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2s">是大家暗恋表白的大好时机？</div>
        <div class="summary ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2.3s">是情侣互诉爱意的浪漫节日？</div>
        <div class="summary ani add-margin-bot" swiper-animate-effect="fadeInUp" swiper-animate-duration="1s" swiper-animate-delay="2.6s">是家人增进感情的美好时刻？</div>
        <div class="content ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="3.6s">那么对他们来说</div>
        <div class="content ani" swiper-animate-effect="zoomIn" swiper-animate-duration="1s" swiper-animate-delay="4s">
          <span class="text">
            <img class="love" src="../assets/img/520.png"/>
          </span><span class="text2">是什么?</span></div>
      </div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-two ani" swiper-animate-effect="fadeInUp" >
         <img v-show="showPng" class="xinfeng"  src="../assets/img/xf.png"/>
         <img v-show="!showPng" class="xinfeng-1"  src="../assets/img/open-xf-4.png"/>
         <img @click="openXf" class="xinfeng-btn" src="../assets/img/open-xf.png"/>
         <div class="xinfeng-text">点击打开"谭木匠"的520情书</div>
      </div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three-1 ani" swiper-animate-effect="fadeInRight" >12</div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three-2 ani" swiper-animate-effect="fadeInDown">12</div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three-3 ani" swiper-animate-effect="fadeInUp">12</div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three-4 ani" swiper-animate-effect="fadeInRight">12</div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three-5 ani" swiper-animate-effect="fadeInLeft">12</div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-three-6 ani" swiper-animate-effect="fadeInDown">12</div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-fore">
        <div class="text ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0" >他们是我们的残障朋友</div>
        <div class="text ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="0.5s">今年的520也恰好是</div>
        <div class="text add-margin-bottom  ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="1s">《全国助残日》</div>
        <div class="text ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="1.5s">我们看着他们的故事</div>
        <div class="text ani" swiper-animate-effect="fadeInDown" swiper-animate-delay="2s">在他们的故事里也看到我们</div>
      </div>
    </swiper-slide>
     <swiper-slide >
      <div class="slide-five">
        <img class="content ani"  swiper-animate-effect="fadeInUp"  src="../assets/img/about.png"/>
      </div>
    </swiper-slide>
    <swiper-slide >
      <div class="slide-six ani"  swiper-animate-effect="fadeInUp">
        <img class="img"  src="../assets/img/nanjing.png"/>
        <img class="js-img"  src="../assets/img/js.png"/>
        <!-- <div class="text1" >匠心谭木匠</div>
        <div class="text2" >温暖南艺行</div> -->
        <div class="text3" >谭木匠与南京艺术学院合作</div>
        <div class="text3" >举办了"美融匠心，爱在南艺"活动</div>
        <div class="text3" >安排了谭木匠350余位残疾员工</div>
        <div class="text3" >前往南艺度过三天</div>
        <div class="text3" >温暖而美好的特别假日</div>
        <img class="biao-btn "   @click="onConfession" src="../assets/img/biao.png"/>
        <div class="biao-text" >点击这里让我们一起为爱表白</div>
      </div>
    </swiper-slide>
  </swiper>
  </div>
</template>
<script>
require('script-loader!../assets/js/swiper.animate1.0.3.min.js')
import 'swiper/dist/css/swiper.css' // 在全局没引入，这里记得要！
import { swiper, swiperSlide } from 'vue-awesome-swiper'
export default {
  components: {
    swiper,
    swiperSlide
  },
  name: 'Carrousel',
  data () {
    return {
      showPng: true,
      play: true,
      eraserflag: 1,
      brushflag: 0,
      showConfession: false,
      swiperOption: {
        effect: 'fade',
        fadeEffect: {
          crossFade: false
        },
        allowTouchMove: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        direction: 'vertical',
        slidesPerView: 1,
        mousewheel: true,
        preventClicks: false,
        on: {
          init: function () {
            swiperAnimateCache(this)
            swiperAnimate(this)
          },
          slideChange: function (event) {
            swiperAnimate(this)
          }
        }
      }
    }
  },
  mounted () {
    // 首先判断路径中有没有userid参数，如果没有的话就重定向
    if (document.location.href.indexOf('userId') === -1) {
      window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb9bc588f403c0a6f&redirect_uri=http%3A%2F%2Fctans.com%2Fdist%2Fceshi.html&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect'
    }
    // 从路径中拿到userid
    // let url = 'hjdalfaf?userId=18'
    // let userId = url.split('?')[1].split('=')[1]
    let userId = document.location.href.split('?')[1].split('=')[1]
    sessionStorage.setItem('userId', userId)
    //     document.getElementById('musicfx').play()
    //     document.addEventListener("WeixinJSBridgeReady",function(){
    //     WeixinJSBridge.invoke('getNetworkType',{},function(e){
    //         document.getElementById('musicfx').play()
    //     })
    // },false)
    document.addEventListener('DOMContentLoaded', function () {
      function audioAutoPlay () {
        var audio = document.getElementById('musicfx')
        audio.play()
        document.addEventListener('WeixinJSBridgeReady', function () {
          audio.play()
        }, false)
      }
      audioAutoPlay()
    })
  },
  methods: {
    openXf () {
      this.showPng = false
    },
    playOrClose () {
      this.play = !this.play
      localStorage.setItem('audio', document.getElementById('musicfx'))
      if (this.play) {
        document.getElementById('musicfx').play()
      } else {
        document.getElementById('musicfx').pause()
      }
    },
    onConfession () {
      this.$router.push({ path: 'forLove' })
    }
  }
}
</script>
<style  @scoped lang="less">
    @import '../assets/css/animate.min.css';
    body {
      font-family: 思源黑体;
      background-size: 100% 100vh;
      font-size: 14px;
      color:#000;
      margin: 0;
      padding: 0;
      background: #000;
      .on{
        position: absolute;
        z-index: 999;
        display: inline-block;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
      }
      .musicIcon{
        position: absolute;
        right: .2rem;
        top: .2rem;
        width: .7rem;
        height: .7rem;
        z-index: 9;
      }
      .audio{
        position: absolute;
        right: 0;
        top: 0rem;
        width: .7rem;
        height: .7rem;
        z-index: 9;
        opacity: 0;
      }
      @keyframes rotating
        {
        from {transform:rotate(0)}
        to {transform:rotate(360deg)}
        }

        @-webkit-keyframes rotating
        {
        from {transform:rotate(0)}
        to {transform:rotate(360deg)}
        }
    }
    .swiper-container {
        width: 100%;
        max-height: 100vh;
    }
    .swiper-slide {
        position: relative;
    }
    .swiper-slide img{
        width: 100%;
    }
    .swiper-pagination-bullet-active{
      background:#FF4866!important;
    }
     .slide-one{
      text-align: center;
      width: 7.1rem;
      border: .2rem solid #FFF;
      background: #FFF;
      background-size: 100%;
      background-repeat: no-repeat;
      .title{
        font-size: .9rem;
        font-weight: bold;
        margin-bottom: .73rem;
        margin-top: 2rem;
        color: #000;
        height: .66rem;
        animation-duration: 2s;
        animation-delay:1s;
        animation-iteration-count: 1;
      }
      .num{
        margin-bottom: .45rem;
        animation-duration: 2s;
        animation-delay:1s;
        animation-iteration-count: 1;
      }
      .icon{
        width: .22rem;
        margin: 0 auto;
        margin-bottom: .51rem;
        animation-duration: 2s;
        animation-delay:2s;
        animation-iteration-count: 1;
      }
      .logo{
        margin-top: 1.6rem;
        font-size: .6rem;
        width: 1.48rem;
        height: .61rem;
        margin: 0 auto;
        animation-duration: 4s;
        animation-delay:3s;
        animation-iteration-count: 1;
      }

    }
    .slide-two{
      background:#FFF;
      width: 7.5rem;
      padding-top: 2rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      .title{
        margin-bottom: .44rem;
      }
      .foryou{
        display: flex;
        justify-content: center;
        margin:0 0 .5rem 0;
      }
      .title-span{
        font-size: 1.1rem;
        font-weight: bold;
        color: #000;
        margin-bottom: 0.5rem;
      }
      .num{
        font-size: .35rem;
        font-weight: bold;
        color: #000;
        margin-bottom: 0.5rem;
      }
      .summary{
        font-size: .41rem;
        color: #000;
        font-weight: bold;
        margin-bottom: .3rem;
      }
      .content{
        display: flex;
        align-items: center;
        font-size: .74rem;
        font-weight: bold;
        margin-bottom: .7rem;
        color: #000;
        .love{
            width: 2.2rem!important;
            height: 1.2rem;
            margin: 0 auto;
            margin-right: .3rem;
        }
      }
      .text{
        font-size: 1.14rem;
        color: #DA3615;
      }
      .text2{
        font-size: .74rem;
      }
      .add-margin{
        margin-top: 1rem;
      }
      .add-left{
        text-align: left;
      }
      .add-margin-bot{
        margin-bottom: 1.21rem;
      }
    }
    .slide-three-bg{
      background: #FFF;
      height: 100%;
      width: 100%;
    }
    .slide-three-1{
      text-align: center;
      width: 100%;
      height: 100vh;
      background: url(../assets/img/bg1.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      color: rgba(0, 0, 0, 0);
    }
    .slide-three-2{
      text-align: center;
      width: 100%;
      height: 100vh;
      background: url(../assets/img/bg2.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      color: rgba(0, 0, 0, 0);
    }
    .slide-three-3{
      text-align: center;
      width: 100%;
      height: 100vh;
      background: url(../assets/img/bg3.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      color: rgba(0, 0, 0, 0);
    }
    .slide-three-4{
      text-align: center;
      width: 100%;
      height: 100vh;
      background: url(../assets/img/bg4.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      color: rgba(0, 0, 0, 0);
    }
    .slide-three-5{
      text-align: center;
      width: 100%;
      height: 100vh;
      background: url(../assets/img/bg5.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      color: rgba(0, 0, 0, 0);
    }
    .slide-three-6{
      text-align: center;
      width: 100%;
      height: 100vh;
      background: url(../assets/img/bg6.png);
      background-repeat: no-repeat;
      background-size: cover;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      color: rgba(0, 0, 0, 0);
    }
    .slide-fore{
      background: #FFF;
      // position: absolute;
      text-align: center;
      // top: 0;
      // bottom: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #000;
      height: 100vh;
      .box{
        display: flex;
      }
      .confession{
        position: absolute;
        bottom: 1.5rem;
        font-size: .3rem;
        color: #000;
        left: 50%;
        margin-left: -2.1rem;
        border: .01rem solid #666;
        border-radius: .07rem;
        text-align: center;
        padding: .2rem .2rem;
        width: 4rem;
      }
      .text{
        display: flex;
        font-size: .47rem;
        font-weight: bold;
        margin-bottom: .5rem;
      }
      .add-margin-bottom{
        margin-bottom: 2rem;
        color: #DA3615;
        font-size: .55rem;
      }
    }
    .slide-five{
      // position: absolute;
      text-align: center;
      // top: 0;
      // bottom: 0;
      img{
        width: 5.64rem;
        height: 5.87rem;
        margin: 0 auto;
        margin-top: 2.18rem;
      }
    }
    .slide-six{
      // position: absolute;
      text-align: center;
      // top: 0;
      // bottom: 0;
      img{
        width: 100%;
        height: 4.5rem;
      }
      .text1{
        font-size: .44rem;
        color: #000;
        margin-top: .5rem;
        margin-bottom: .3rem;
        font-weight: bold;
      }
      .text2{
        font-size: .44rem;
        color: #000;
        margin-bottom: 0.3rem;
        font-weight: bold;
      }
      .text3{
        font-size: .25rem;
        color: #000;
        margin-bottom: 0.1rem;
      }
    }
    .slide-seven{
      // position: absolute;
      text-align: center;
      // top: 0;
      // bottom: 0;
      height: 100%;
      padding-top: 1.2rem;
      .title{
        font-size: 1.12rem;
        color: #000;
        margin-bottom: .7rem;
        font-weight: bold;
      }
      .love{
        font-size: 1.12rem;
        color: #DA3615;
      }
      .text{
        font-size: .3rem;
        color: #000;
        margin-bottom: .2rem;
      }
    }
    .slide-eight{
      position: absolute;
      text-align: center;
      top: 0;
      bottom: 0;
      height: 100vh;
      padding-top: 1.2rem;
      .title{
        font-size: 1.12rem;
        color: #000;
        margin-bottom: .7rem;
        font-weight: bold;
      }
      .love{
        font-size: 1.12rem;
        color: #DA3615;
      }
      .text{
        font-size: .3rem;
        color: #000;
        margin-bottom: .2rem;
      }
    }
    .xf{
      width: 6.28rem!important;
      height: 3.14rem;
    }
    .xf-btn{
      width: 1.48rem!important;
      height: .76rem;
    }
    .biao-btn{
      width: 1.3rem!important;
      height: .7rem!important;
      margin: 0 auto;
      margin-top: .2rem;
      margin-bottom: .1rem;
      -webkit-animation-name:pulse2;
      animation-name:pulse2;
      animation-duration: 1s;
      animation-iteration-count: infinite;
    }
    @-webkit-keyframes pulse2{
        0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
        15%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
        50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
        100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
      }
      @keyframes pulse2{
        0%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
        15%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}
        50%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
        100%{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1)}
      }
    .biao-text{
      font-size: .24rem;
      color: #000;
      text-align: center;
    }
    .title-img{
      width: 2.68rem!important;
      height: 1.63rem;
      margin: 0 auto;
    }
    .second-title{
      width: 5.51rem!important;
      height: .85rem;
    }
    .xinfeng{
      width: 5.58rem!important;
      height: 2.54rem;
      margin-bottom: 2.51rem;
      margin-top:1.6rem;
    }
    .xinfeng-1{
      width: 7.18rem!important;
      height: 4.14rem;
      margin-bottom: 2.51rem;
    }
    .xinfeng-btn{
      width: 1.48rem!important;
      height: .76rem;
      margin-bottom: .94rem;
    }
    .xinfeng-text{
      font-size: .2rem!important;
      color: #999999;
    }
    .js-img{
      width: 2.35rem!important;
      height: 1.1rem!important;
      margin: 0 auto;
      margin-top: .5rem;
      margin-bottom: .5rem;
    }
    </style>
